@keyframes modalSlideInDown
  from
    transform: translate3d(0, -100%, 0)
    visibility: visible

  to
    transform: translate3d(0, 0, 0)

body.fui-modal-open
  overflow: hidden

  .fui-root
    display: block
    filter: blur(4px)

.fui-modal,
.fui-modal-backdrop
  top: 0
  bottom: 0
  left: 0
  right: 0
  z-index: 1

.fui-modal
  position: fixed
  overflow: auto
  padding-top: 4rem
  padding-bottom: 4rem
  background-color: transparentize(black, .6)
  z-index: 1

  // 注意：如果对话框高度超过视窗高度，fixed定位的backdrop会遮挡住滚动条
  &-backdrop
    position: absolute
    background-color: transparent

  &-dialog
    position: relative
    margin-left: auto
    margin-right: auto
    background-color: $bg-body
    border-radius: 2px
    font-size: 14px
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2)
    animation: modalSlideInDown .3s
    z-index: 1

    &[size="sm"]
      width: 384px

    &[size="md"]
      width: 576px

    &[size="lg"]
      width: 768px

    &[size="xlg"]
      width: 960px

  &-title
    @include flex-xy-center
    display: flex
    position: relative
    border-bottom: 1px $border-mute solid
    color: $text-default

    .title
      padding: 16px 20px
      flex: 1
      @include text-ellipsis
      font-weight: bold

  &-body
    padding: 16px 20px

  &-foot
    @include flex-xy-center
    padding-top: 16px

    .fui-btn:not(:last-of-type)
      margin-right: 12px

  &-close
    cursor: pointer
    transition: fill .2s
    position: absolute
    right: 18px
    top: 18px

    &:hover
      fill: $brand-danger
